<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    button {
      color: red;
      padding: 5px 10px;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <div id="app"></div>
  <template id="my-template-element">
    <div>
      <h1>Test Component</h1>
      <button @click="count++">countNum: {{ count }}</button>
    </div>
    <my-component></my-component>
  </template>
  <script src="https://unpkg.com/vue@3.2.31"></script>
  <script>
    const { createApp, ref } = Vue;
    const App = {
      setup() {
        const count = ref(0);
        return { count };
      },
      template: "#my-template-element"
    };
    const app = createApp(App);

    app.component(
      // 组件的名字
      "my-component",
      // 组件的实现
      {
        setup() {
          const name = ref("Vue3");
          const version = ref("3.2.31");
          const age = ref(18);

          function addAge() {
            age.value++;
          }

          return { name, version, age, addAge };
        },
        template: `
          <div>
            <h1>My Component</h1>
            <p>name: {{ name }}</p>
            <p>version: {{ version }}</p>
            <p>age: {{ age }}</p>
            <button @click="addAge">addAge</button>
          </div>
        `
      }
    );

    app.mount("#app");
  </script>
</body>

</html>